<template>
  <a-card>
    <!-- <p>数据等级说明：</p>
    <p style="margin-bottom: 10px;">数据从高到低分6级（核心数据）、5级（重要数据）、4级（一般数据）、3级（一般数据）、2级（一般数据）、1级（一般数据）共六个级别。</p> -->
    <div style="display: flex; justify-content: flex-end;margin-bottom: 20px;">
      <a-button type="primary" icon="plus" @click="showModal()">{{ $t('user.v146') }}</a-button>
    </div>
    <a-table :pagination="false"  :data-source="listData" :rowKey="record => record.Id">
      <a-table-column key="Id" data-index="Id">
        <span slot="title" class="min-w-90p">{{ $t(  'user.verification-code.required111566110577115') }}</span>
      </a-table-column>
      <a-table-column key="DateLevel">
        <span slot="title" class="min-w-90p">{{ $t(   'user.verification-code.required111566110577129') }}</span>
        <template slot-scope="text, record">
          <span>{{ isLang?record.DateLevel.split('/')[0]:record.DateLevel.split('/')[1] }}</span>
        </template>
      </a-table-column>
      <a-table-column key="DateIllustrate" :title="$t(  'user.verification-code.required111566110577116')">
        <template slot-scope="text, record">
          <span>{{ isLang?record.DateIllustrate:record.DateIllustrate }}</span>
        </template>
        <!-- <span slot="title" class="min-w-90p">{{ $t(   'user.verification-code.required111566110577116') }}</span> -->
      </a-table-column>
      <a-table-column key="action" :title="$t('app.setting.othersettings')">
        <template slot-scope="text, row">
          <span>
            <a-button type="link" @click="showModal(row.Id)">{{ $t('user.verification-code.required111566147')
              }}</a-button>
          <a-popconfirm :title="$t( 'user.verification-code.required111566110577223')" :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')" @confirm="handleClickDelete(row.Id)" @cancel="cancel">
            <a-button type="link">{{ $t('app.setting.copy') }}</a-button>
          </a-popconfirm>
          </span>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页 -->
    <a-pagination size="small" v-model="queryForm.page" :total="total" hideOnSinglePage
    :pageSize.sync="queryForm.pageSize" @change="getList"/>
    <!-- <a-pagination size="small" v-model="queryForm.page" :total="total" hideOnSinglePage
    :pageSize.sync="queryForm.pageSize" @change="getList" /> -->
    <a-drawer :title="modalTitle" placement="right" :closable="false" :visible="modalVisible" @close="closeDrawer"
      :width="500">
      <a-form v-model="addForm" labelAlign="right">
        <a-form-item
          :label="$t('user.verification-code.required111566110577115')"
          v-show="addForm.id"
          class="sp-item"
        >
          {{ addForm.id }}
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required111566110577129')">
          <a-input v-model="addForm.DateLevel" :placeholder="$t('user.v153')"/></a-form-item>
        <a-form-item :label="$t('user.verification-code.required111566110577116')">
          <a-input v-model="addForm.DateIllustrate" :placeholder="$t($t('user.v152'))"/></a-form-item>
      </a-form>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }">
        <a-button style="margin-right: 8px" @click="closeDrawer">{{ $t('user.email.required11') }}</a-button>
        <a-button type="primary" @click="subAddForm">{{ $t( 'user.verification-code.required1166') }}</a-button>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>

import { dataList, dataCreate, dataChange, dataDelete, dataDetails } from "@/api/ytdg"
const columns = [
  {
    title: '序号',
    dataIndex: 'Id',
    align: 'center',
  },
  {
    title: '数据等级',
    dataIndex: 'DateLevel',
    align: 'center',
  },
  {
    title: '等级说明',
    dataIndex: 'DateIllustrate',
    align: 'center',
  },
  {
    title: '操作',
    width: '150px',
    dataIndex: '',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      columns,
      modalVisible: false,
      modalTitle: '',
      isLang:localStorage.getItem("lang").includes("zh-CN"),
      listData: [],
      total: 0,
      queryForm: {
        page: 1,
        pageSize: 10
      },
      addForm: {
        DateIllustrate: undefined,
        DateLevel: undefined,
      },
    };
  },
  created() {
    this.getList()
  },
  mounted(){
    let that=this;
    window.addEventListener('setItemEvent', function(e) {
      if(e.key=='lang'){
        let lang= JSON.parse(e.value)
        console.log(lang);
        if(lang == 'zh-EN'){
          that.isLang=false;
        }else{
          that.isLang=true
        
        }
      }
    })
   },
  // mounted(){
  //   let that=this;
  //   window.addEventListener('setItemEvent', function(e) {
  //     if(e.key=='lang'){
  //       let lang= JSON.parse(e.value)
  //       console.log(lang);
  //       if(lang == 'zh-EN'){
  //         that.isLang=false;
  //       }else{
  //         that.isLang=true
  //
  //       }
  //     }
  //   })
  // },
  methods: {
    getList() {
      dataList(this.queryForm).then((res) => {
        this.listData = res.data.Lists
        this.total = res.data.Total
      })
    },
    showModal(id) {
      if (id) {
        this.modalTitle = this.$t( 'user.verification-code.required111566110577130')
        dataDetails({ id }).then((res) => {
          this.addForm = res.data[0]
          this.addForm.id = id
        })
      } else {
        this.modalTitle = this.$t('user.verification-code.required111566110577131')
      }
      this.modalVisible = true;
    },
    // 关闭抽屉
    closeDrawer() {
      this.addForm = {
        DateIllustrate: undefined,
        DateLevel: undefined,
        id: undefined
      }
      this.modalVisible = false
    },

    // 新增
    subAddForm() {
      if (this.addForm.id) {
        dataChange(this.addForm).then(() => {
          this.$message.success(this.$t( 'user.verification-code.required111566110577229'))
          this.getList()
          this.closeDrawer()
        },(err)=>{
          this.$message.error(err)
        })
      } else {
        dataCreate(this.addForm).then((res) => {
          this.$message.success(this.$t( 'user.verification-code.required111566110577230'))
          this.getList()
          this.closeDrawer()
        },(err)=>{
          this.$message.error(err)
        })
      }

    },

    // 删除
    handleClickDelete(id) {
      dataDelete({ id }).then((res) => {
        this.$message.success(this.$t('user.verification-code.required111566110577133'));
        this.getList()
      })
    },
    cancel() {
      this.$message.warning(this.$t('user.verification-code.required111566110577231'));
    },
  }
}
</script>
<style lang="less" scoped>
:deep(.ant-drawer-body) {
  min-height: 200px !important;
  padding-bottom: 100px;
  .delete-button {
    position: absolute;
    right: 54px;
    top: 0;
  }
}
.ant-pagination {
  float: right;
}

/deep/ .ant-form-item-label {
  display: inline-block;
  overflow: visible !important;
  line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

</style>
